<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改密码"
    :close-on-click-modal="false"
    append-to-body
    width="620"
    class="editDialog"
    align-center
  >
    <el-form
      :model="form"
      :rules="formRules"
      label-width="120px"
      size="large"
      ref="pwdForm"
      class="form"
    >
      <el-form-item label="原密码" prop="pwd">
        <el-input
          type="password"
          placeholder="请输入原登录密码"
          v-model="form.pwd"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
          type="password"
          placeholder="新密码长度为8-20个字符，同时包含数字字母"
          v-model="form.newPwd"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="newPwdRepeat">
        <el-input
          type="password"
          placeholder="请再次输入新密码"
          v-model="form.newPwdRepeat"
          show-password
        />
      </el-form-item>
    </el-form>
    <div class="opt">
      <el-button size="large" @click="dialogVisible = false" auto-insert-space
        >取消</el-button
      >
      <el-button
        type="primary"
        size="large"
        auto-insert-space
        @click="submitForm(pwdForm)"
      >
        确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { updatePwd } from "@/utils/requests.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

import { storage } from '@/utils/storage.js';

const router = useRouter();

let dialogVisible = ref(false);

import qs from "qs";
const pwdForm = ref();

let form = ref({
  pwd: "",
  newPwd: "",
  newPwdRepeat: "",
});

let formRules = {
  pwd: [{ required: true, message: "原密码不能为空", trigger: "blur" }],
  newPwd: [
    {
      required: true,
      message: "新密码不能为空",
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        if (value === form.value.pwd) {
          callback(new Error("新密码不能与原密码相同"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
    {
      min: 8,
      max: 20,
      message: "密码长度需要在8到20位",
      trigger: "blur",
    },
    {
      pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).+$/,
      message: "密码长度：8 ~ 20 位，至少包含字母、数字和特殊字符",
      trigger: "blur",
    },
  ],
  newPwdRepeat: [
    { required: true, message: "请确认新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.newPwd) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const submitForm = (formEl) => {
  if (!formEl) return;

  formEl.validate((valid) => {
    if (valid) {
      updatePwd(
        qs.stringify({
          account: storage.get("be-account-value"),
          oldPassword: form.value.pwd,
          newPassword: form.value.newPwd,
        }),
      ).then((data) => {
        //
        if (data) {
          ElMessage({
            message: "密码修改成功，请重新登录",
            type: "success",
          });

          storage.clear(); 
          
          //退出到登录页
          router.push("/login");
        }
      });
    } else {
      return false;
    }
  });
};

const openDialog = () => {
  dialogVisible.value = true;
  form.value.pwd = "";
  form.value.newPwd = "";
  form.value.newPwdRepeat = "";
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.form {
  width: 540px;
}

.el-form-item--large {
  margin-bottom: 30px;
}

.opt {
  margin-top: 50px;
  text-align: right;
}
</style>
